<template>
  <div class="bigBox">
    <!-- <div class="headerBox">
      <h5>人才库列表</h5>
    </div> -->
    <myHeader title="人才库列表"/>
    <Search/>
    <div class="big2Box">
        <!-- <div class="contentBox">
          <el-select v-model="valueType" placeholder="请选择" @change="changeOption($event)" size="mini">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
          <div class="searchBox">
            <span id="searchText">关键字查询:</span>
            <el-input size="mini" placeholder="请输入内容" class="searchContent"></el-input>
          </div>
        </div> -->
        <el-table
          :data="tableData2"
          stripe
          border
          size="small"
          style="width: 100%"
          :default-sort = "{prop: 'date', order: 'descending'}"
        >
            <el-table-column
              prop="tId"
              label="ID"
              sortable
              width="80px">
            </el-table-column>
            <el-table-column
              prop="tName"
              label="姓名"
              sortable
            >
            </el-table-column>
            <el-table-column
              prop="tSex"
              label="性别"
              sortable
            >
            </el-table-column>
            <el-table-column
              prop="tAge"
              label="年龄"
              sortable
              >
            </el-table-column>
            <el-table-column
              prop="tStudy"
              label="学历"
              sortable
              
              >
            </el-table-column>
            <el-table-column
              prop="tPhone"
              label="手机"
              sortable
             
              >
            </el-table-column>

            <el-table-column
                  label="状态"
                  sortable>
                <template slot-scope="{row}">
                  <el-tag  :type="changeStatus(row)" effect="dark">{{row.tStatus}}</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="详细资料">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleEdit(scope.$index, scope.row)">查看</el-button>
                  </template>
            </el-table-column>
          </el-table>
          <!-- 页数 -->
          <!-- <div class="pageContainer">
            <div class="footer-left" style="float: left;margin-left: 10px">
              当前显示 1 到 {{currentPage}}, 共 {{count}} 项
            </div>
            <div class="footer-right" style="float: right">
              <el-pagination
                  
                  background
                  layout="prev, pager, next"
                  :total="100">
              </el-pagination>
            </div>
          </div> -->
          
    </div>
    <Paging :pageSum="pageSum" :total="total"/>
  </div>
    
</template>

<script>
import myHeader from '@/components/myHeader/myHeader.vue'
import Search from '@/components/Search/Search.vue'
import Paging from '@/components/Paging/Paging.vue'
import {mapState} from 'vuex'


export default {
  name: "TalentList",
  components: {
      myHeader,
      Search,
      Paging
    },
  
  data() {
      return {
        // tableData: [{
        //   id: 1,
        //   name: '王小虎',
        //   sex: '男',
        //   age:35,
        //   education:'本科',
        //   phone:'12678365511',
        //   status:'已入职',
        //   detail:'详细资料'
        // }, {
        //   id: 2,
        //   name: '王小小',
        //   sex: '女',
        //   age:35,
        //   education:'大专',
        //   phone:'12678365511',
        //   status:'未通过',
        //   detail:'详细资料'
        // }, {
        //   id: 3,
        //   name: '小红',
        //   sex: '女',
        //   age:30,
        //   education:'大专',
        //   phone:'180234674',
        //   status:'已通过',
        //   detail:'详细资料'
        // }, {
        //   id: 4,
        //   name: '小明',
        //   sex: '男',
        //   age:28,
        //   education:'硕士',
        //   phone:'180234674',
        //   status:'未查看',
        //   detail:'详细资料'
        // },{
        //   id: 5,
        //   name: '大二小',
        //   sex: '男',
        //   age:23,
        //   education:'本科',
        //   phone:'18023467400',
        //   status:'已通过',
        //   detail:'详细资料'
        // },{
        //   id: 6,
        //   name: '朱该',
        //   sex: '男',
        //   age:27,
        //   education:'大专',
        //   phone:'367999000000',
        //   status:'已通过',
        //   detail:'详细资料'
        // }
        // ],
        //每页的个数
          currentPage:10,
        //每页显示行数的列表
          options: [{
            value: '选项1',
            label: '10'
          }, {
            value: '选项2',
            label: '25'
          }, {
            value: '选项3',
            label: '50'
          }, {
            value: '选项4',
            label: '100'
          }],
          valueType: '选项1',
          //页面数据
          tableData2:[],
          //总页数
          pageSum: 0,
          //当前条数
          limit: 10,
          //当前页
          page: 1,
          total: 0,
          //年龄
          tAge:20,

          
      }
    },
    mounted() {
      this.getInfo(this.limit,this.page);
    },
    methods: {
        //点击查看显示个人资料详情页面
      handleEdit(index,row){
          //console.log(index)
          //console.log(row.tId)
          //console.log(row.tStatus)
          this.$router.push
            ({name:"InfoDetail",
              params:{id:row.tId,status:row.tStatus}
            })
      },
      //判断状态
      changeStatus(row){
          //console.log(row);
          if(row.tStatus==='已通过'){
            return 'success'
          }
          if(row.tStatus==='未通过'){
            return ''
          }
          if(row.tStatus==='已入职'){
            return 'danger'
          }
          if(row.tStatus==='未查看'){
            return 'info'
          }
      },
      //获取数据
      getInfo(limit,page){
        this.$axios({
          methods:"get",
          url:"http://132.232.110.185/personnelManagement/talents/list",
          params:{
            limit:this.limit,
            page:this.page,
          }
        })
        .then(
          (res)=>{
            //console.log(res);
            //console.log(res.data.count);
            //总条数
            this.total=res.data.count
            //表格数据
            this.tableData2=res.data.data
            //总的页数
            this.pageSum = Math.ceil(this.total/this.limit)
            if(res.data.data.length === 0) {
                this.changePage -= 1
            }
          },
          (err)=>{}
        )

      },
      //搜索查询函数
      searchInfo(keyword){
        if(keyword == '') {
          this.getInfo(this.limit,this.page)
        }else{
            //console.log(keyword);
            this.$axios({
              methods:"get",
              url:"http://132.232.110.185/personnelManagement/talents/list",
              params:{
                limit:this.limit,
                page:this.page,
                like:keyword,
              }
            })
            .then(
              (res)=>{
                //console.log(res)
                this.tableData2=res.data.data;
                this.total=res.data.count;
                this.pageSum = Math.ceil(this.total/this.limit)
              }
            )
        }

      },
     
  },
  computed: {
      ...mapState('Information',['changeLimit','changePage','inputValue']),
      changePage:{
        get(){
          return this.$store.state.Information.changePage
        },
        set(val){
          return this.$store.state.Information.changePage = val
        }
      },
      changeLimit:{
        get(){
          return this.$store.state.Information.changeLimit
        },
        set(val){
          return this.$store.state.Information.changeLimit = val
        }
      },
      inputValue:{
        get(){
          return this.$store.state.Information.inputValue
        },
        set(val){
          return this.$store.state.Information.inputValue = val
        }
      }
    },
  watch: {
      changeLimit(newLimit){
        this.limit = newLimit
        this.getInfo(this.limit,this.page)
      },
      changePage(newPage){
        this.page = newPage
        this.getInfo(this.limit,this.page)
      },
      inputValue(newValue){
        this.searchInfo(newValue)
      }
  }
}
</script>

<style scoped>
  .bigBox{
  width: 94%;
  margin-left: 3%;
  background-color: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  /* height:650px; */
  margin-top:15px;
  padding-bottom: 60px;
}
/* 标题以下的内容 */
.big2Box{
  padding-left:15px;
  padding-right:15px;
  width:97%;
  margin:0 auto;
}
/* 人才库列表标题 */
  .headerBox{
  width: 100%;
  height: 40px;
  padding: 10px;
  display: flex;
  align-items: center;
  font-size: 18px;
  border-bottom:1px solid #cfd1d2;
}
.contentBox{
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  margin-bottom: 12px;
}
.searchBox{
  /* width:20%;
  height:30px; */
  /* outline:1px solid black; */
  display: flex;
  justify-content: space-around;

}
.searchContent{
  width:60%;
}
/* 关键字查询 */
#searchText{
    font-size:12px;
    color:gray;
    margin-top: 5px;
}
.el-select{
  width: 80px;
  height: 30px;
}
/* 页数 */
.pageContainer{
  width: 100%;
  height: 34px;
  line-height: 34px;
  margin-top:12px;
  font-size:14px;
  color:gray;
  display: flex;
  justify-content: space-between;
}

</style>